<template>
  <div class="PhotosInfo">
    <!-- 头部标题区域 -->
    <header>
      <p class='title'>{{imageinfo.title}}</p>
      <div class="des">
        <span class="add_time">{{imageinfo.add_time}}</span>
        <span class="click">点击了{{imageinfo.click}}次</span>
      </div>
    </header>
    <!-- 文章内容区域 -->
    <div class="content">
      <div class="thumImages">
        <img v-for="(thum,index) in thums"
             :key="thum.id"
             :src="thum.src"
             @click="showThum(index)">
      </div>
      {{imageinfo.content}}
    </div>
    <!-- 评论区域 -->
    <Comment id="id"></Comment>
  </div>
</template>
<script>
import Comment from '@/components/comment'
export default {
  data: () => ({
    id: '',
    imageinfo: {},
    thums: []
  }),
  created () {
    this.id = this.$route.params.id
    this.getImageInfo()
    this.getThumimages()
  },
  methods: {
    async getImageInfo () {
      try {
        const {
          data: { message }
        } = await this.Api.getImageInfo(this.id)
        this.imageinfo = message
      } catch (error) {
        this.$Toast('请求图片详情失败')
      }
    },
    async getThumimages () {
      try {
        const {
          data: { message }
        } = await this.Api.getThumimages(this.id)
        this.thums = message
      } catch (error) {
        this.$Toast('请求图片缩略图失败')
      }
    },
    showThum (startPosition) {
      var images = []
      this.thums.forEach(item => {
        if (item.src) images.push(item.src)
      })
      this.$ImagePreview({
        images,
        startPosition
      })
    }
  },
  components: {
    Comment
  }
}
</script>
<style lang="less" scoped>
header {
  height: 70px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);

  .title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: red;
    letter-spacing: 1px;
    margin-left: 10px;
  }
  .des {
    .add_time {
      font-size: 14px;
      margin-left: 10px;
      float: left;
      color: #00f;
    }
    .click {
      font-size: 14px;
      margin-right: 20px;
      float: right;
    }
  }
}
.content {
  font-size: 12px;
  margin: 10px;
  .thumImages {
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
